<template>
    <div>
        <span class="Real_time_online">实时在线：{{ Real_time_online }}人</span>
        <a href="http://sdkaohe.cn" class="home_link">系统首页</a>
        <canvas id="ihead" width="1920" height="120" style="background:#0b111f"></canvas>
    </div>
</template>

<script>
    export default {
        name: 'ihead',
        data(){
            return {
                msg: '山东省双招双引考核信息系统',
                Real_time_online:0
                
            }
        },
        computed:{

            c(){
                return document.getElementById("ihead")
            },
            ctx(){
                return this.c.getContext('2d')
            }
        },
        mounted(){
            this.Line()
            this.jixingleft(365,30,0)
            this.jixingleft(388,30,0)
            this.jixingleft(411,30,0)
            this.jixingleft(434,30,0)
            this.jixingleft(457,30,1)
            this.jixingleft(480,30,1)
            this.jixingleft(503,30,1)
            this.jixingleft(526,30,1)
            this.jixingleft(586,65,0)
            this.jixingleft(609,65,0)
            this.jixingleft(632,65,1)
            this.jixingleft(655,65,1)
            this.Online()
            this.Line2()
            this.jixingleft(488,92,0)
            this.jixingleft(511,92,0)
            this.jixingleft(534,92,1)
            this.jixingleft(557,92,1)
            this.Line3()
            this.jixingleft(615,106,0)
            this.jixingleft(637,106,1)
            this.jixingleft(660,106,1)
            this.jixingright(1234,104,1)
            this.jixingright(1257,104,1)
            this.jixingright(1280,104,0)
            this.Line4(803,29,"#1898e7","#10354e")
            this.Line4(803,97,"#1898e7","#10354e")
            this.head_title()
            this.head_title_text(770,69)
            this.Line5()
            this.jixingright(1367,30,0)
            this.jixingright(1390,30,0)
            this.jixingright(1413,30,0)
            this.jixingright(1436,30,0)
            this.jixingright(1459,30,1)
            this.jixingright(1482,30,1)
            this.jixingright(1505,30,1)
            this.jixingright(1528,30,1)
            this.jixingright(1309,65,1)
            this.jixingright(1287,65,1)
            this.jixingright(1264,65,0)
            this.jixingright(1241,65,0)
            this.Line6()
            this.jixingright(1340,92,0)
            this.jixingright(1363,92,0)
            this.jixingright(1386,92,1)
            this.jixingright(1409,92,1)
            this.home_link()
            this.getData()
        },
        methods: {
            Line(){
                this.ctx.beginPath()
                this.ctx.moveTo(138,38)
                this.ctx.lineTo(553,38)
                this.ctx.lineTo(588,74)
                this.ctx.lineTo(720,74)
                this.ctx.strokeStyle="#17507b"
                this.ctx.stroke()
            },
            jixingleft(x,y,colors){
                let istroke,ifill
                if(colors){
                    istroke =  "rgba(36,168,243,0.4)"
                    ifill = "rgba(34,87,186,0.6)"
                }else{
                    istroke =  "rgba(219,209,31,0.4)"
                    ifill = "rgba(112,116,46,0.6)"
                }
                this.ctx.beginPath()
                this.ctx.moveTo(x+0,y+0)
                this.ctx.lineTo(x+18,y+0)
                this.ctx.lineTo(x+20,y+2)
                this.ctx.lineTo(x+2,y+2)
                this.ctx.lineTo(x+0,y+0)
                this.ctx.strokeStyle = istroke
                this.ctx.fillStyle = ifill
                this.ctx.stroke()
                this.ctx.fill()
            },
            jixingright(x,y,colors){
                let istroke,ifill
                if(colors){
                    istroke =  "rgba(36,168,243,0.4)"
                    ifill = "rgba(34,87,186,0.6)"
                }else{
                    istroke =  "rgba(219,209,31,0.4)"
                    ifill = "rgba(112,116,46,0.6)"
                }
                this.ctx.beginPath()
                this.ctx.moveTo(x+2,y+0)
                this.ctx.lineTo(x+20,y+0)
                this.ctx.lineTo(x+18,y+2)
                this.ctx.lineTo(x+0,y+2)
                this.ctx.lineTo(x+2,y+0)
                this.ctx.strokeStyle = istroke
                this.ctx.fillStyle = ifill
                this.ctx.stroke()
                this.ctx.fill()
            },
            Online(){
                let grd = this.ctx.createLinearGradient(188,46,537,78)
                grd.addColorStop(0,"#0c1220")
                grd.addColorStop(1,"#13283b")
                this.ctx.beginPath()
                this.ctx.moveTo(188,46)
                this.ctx.lineTo(508,46)
                this.ctx.lineTo(537,78)
                this.ctx.lineTo(188,78)
                this.ctx.fillStyle = grd
                this.ctx.fill()
                this.ctx.strokeStyle = "#17507b"
                this.ctx.stroke()
            },
            Line2(){
                this.ctx.beginPath()
                this.ctx.moveTo(303,87)
                this.ctx.lineTo(577,87)
                this.ctx.lineTo(593,103)
                this.ctx.strokeStyle="#17507b"
                this.ctx.stroke()
            },
            Line3(){
                this.ctx.beginPath()
                this.ctx.moveTo(587,83)
                this.ctx.lineTo(618,113)
                this.ctx.lineTo(1302,113)
                this.ctx.lineTo(1330,83)
                this.ctx.strokeStyle="#17507b"
                this.ctx.stroke()
            },
            head_title(){
                this.ctx.beginPath()
                this.ctx.moveTo(727,28)
                this.ctx.lineTo(767,97)
                this.ctx.lineTo(1142,97)
                this.ctx.lineTo(1184,28)
                this.ctx.lineTo(727,28)
                this.ctx.fillStyle = "rgba(22, 107, 148, 0.4)"
                this.ctx.fill()
            },
            Line4(x,y,color1,color2){
                let grd = this.ctx.createLinearGradient(x+0,y+0,x+300,y+0)
                grd.addColorStop(0,color2)
                grd.addColorStop(0.5,color1)
                grd.addColorStop(1,color2)
                this.ctx.beginPath()
                this.ctx.moveTo(x+0,y+0)
                this.ctx.lineTo(x+300,y+0)
                this.ctx.strokeStyle = grd
                this.ctx.stroke()
            },
            head_title_text(x,y){
                let grd = this.ctx.createLinearGradient(x,y,x+350,y)
                grd.addColorStop(0,"#019098")
                grd.addColorStop(0.3,"#07f1f2")
                grd.addColorStop(0.7,"#07f1f2")
                grd.addColorStop(1,"#019098")
                this.ctx.font="bold 28px Arial "
                this.ctx.fillStyle = grd
                this.ctx.fillText("山东省双招双引考核信息系统",x,y)
            },
            Line5(){
                this.ctx.beginPath()
                this.ctx.moveTo(1200,74)
                this.ctx.lineTo(1330,74)
                this.ctx.lineTo(1365,39)
                this.ctx.lineTo(1799,39)
                this.ctx.strokeStyle="#17507b"
                this.ctx.stroke()
            },
            Line6(){
                this.ctx.beginPath()
                this.ctx.moveTo(1327,103)
                this.ctx.lineTo(1341,87)
                this.ctx.lineTo(1586,87)
                this.ctx.strokeStyle="#17507b"
                this.ctx.stroke()
            },
            home_link(){
                let grd = this.ctx.createLinearGradient(1573,47,1406,47)
                grd.addColorStop(0,"#0c1220")
                grd.addColorStop(1,"#13283b")
                this.ctx.beginPath()
                this.ctx.moveTo(1573,47)
                this.ctx.lineTo(1406,47)
                this.ctx.lineTo(1378,77)
                this.ctx.lineTo(1573,77)
                this.ctx.fillStyle = grd
                this.ctx.fill()
                this.ctx.strokeStyle = "#17507b"
                this.ctx.stroke()
            },
            getData(){
                this.$axios.get('http://sdkaohe.cn/api/report/data/realTimeOnline')
                .then(response=>{
                    this.Real_time_online = response.data.data
                    console.log(response)
                })
                .catch(error=>{
                    console.log(error);
                    alert('网络错误，不能访问');
                })
            }
        }
    }
</script>

<style scoped>
    #ihead{
        margin: 0px;
        padding: 0px;
        float: left;
        width: 1920px;
        height: 120px;
    }
    .Real_time_online{
        position: absolute;
        top:50px;
        left: 285px;
        color: #0be3e0;
    }
    .home_link{
        position: absolute;
        top:50px;
        left: 1431px;
        width: 64px;
        color: #0be3e0;
        text-decoration: none;
    }
    .home_link:hover{
        color: #3ff402;
    }
</style>